<template>
  <div class="guide">
    <Skeleton :loading="props.loading">
      <template #ske>
        <div style="width: 100%">
          <van-skeleton-paragraph style="width: 46%; height: 40px" />

          <div style="
              width: 100%;
              display: flex;
              justify-content: center;
              margin-top: 15px;
            ">
            <van-skeleton-image style="width: 53px; height: 53px; border-radius: 5px" />
            <van-skeleton-image style="
                width: 53px;
                height: 53px;
                margin-left: 20px;
                border-radius: 5px;
              " />
            <van-skeleton-image style="
                width: 53px;
                height: 53px;
                margin-left: 20px;
                border-radius: 5px;
              " />
            <van-skeleton-image style="
                width: 53px;
                height: 53px;
                margin-left: 20px;
                border-radius: 5px;
              " />
          </div>
          <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 20px;
            ">
            <van-skeleton-avatar style="width: 40px; height: 40px; margin-right: 15px"></van-skeleton-avatar>
            <van-skeleton-paragraph style="width: 100%; height: 70px" />
          </div>
          <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 20px;
            ">
            <van-skeleton-avatar style="width: 40px; height: 40px; margin-right: 15px"></van-skeleton-avatar>
            <van-skeleton-paragraph style="width: 100%; height: 70px" />
          </div>
          <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 20px;
            ">
            <van-skeleton-avatar style="width: 40px; height: 40px; margin-right: 15px"></van-skeleton-avatar>
            <van-skeleton-paragraph style="width: 100%; height: 70px" />
          </div>
          <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 20px;
            ">
            <van-skeleton-avatar style="width: 40px; height: 40px; margin-right: 15px"></van-skeleton-avatar>
            <van-skeleton-paragraph style="width: 100%; height: 70px" />
          </div>
          <div style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 20px;
            ">
            <van-skeleton-avatar style="width: 40px; height: 40px; margin-right: 15px"></van-skeleton-avatar>
            <van-skeleton-paragraph style="width: 100%; height: 70px" />
          </div>
        </div>
      </template>
      <template #main>
        <h3>{{ $t("language.Share.guide.name") }}</h3>
        <div class="img">
          <img @click="openWeb('https://t.me/share')" v-lazy="getImg('fly.png')" alt="" />
          <img @click="openWeb('https://m.facebook.com/')" v-lazy="getImg('re9.png')" alt="" />
          <img @click="openWeb('https://api.whatsapp.com/')" v-lazy="getImg('re8.png')" alt="" />
          <img @click="openWeb('https://www.instagram.com/')" v-lazy="getImg('re10.png')" alt="" />
          <img @click="openWeb('https://twitter.com/')" v-lazy="getImg('re7.png')" alt="" />
        </div>
        <dl>
          <dd v-for="(item, index) in textlist" :key="index">
            <span>{{ index + 1 }}</span>
            <p>{{ $t(item.lang) }}</p>
          </dd>
        </dl>
      </template>
    </Skeleton>
  </div>
</template>

<script setup lang="ts">
import { defineProps, reactive } from "vue";
let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
let textlist = reactive([
  {
    lang: "language.Share.guide.text1",
  },
  {
    lang: "language.Share.guide.text2",
  },
  {
    lang: "language.Share.guide.text3",
  },
  {
    lang: "language.Share.guide.text4",
  },
  {
    lang: "language.Share.guide.text5",
  },
]);
let openWeb = (url) => {
  window.open(url)
}
</script>

<style scoped lang="scss">
.guide {
  width: 100%;
  padding: 0 10px;

  h3 {
    font-size: 20px;
    color: #fff;
  }

  .img {
    padding: 10px 0;
    background-color: #4a4c59;
    border-radius: 8px;
    margin: 20px 0;
    @include flex(row, space-around, center);

    img {
      width: 43px;
    }

  }

  dl {
    dd {
      padding: 10px 15px;
      @include flex(row, flex-start, center);
      border-radius: 8px;
      border: 1px solid #4c4c4f;

      span {
        display: block;
        height: 40px;
        font-size: 20px;
        color: #fff;
        width: 40px;
        line-height: 40px;
        background-color: #fff;
        background-color: #0a906c;
        border-radius: 20px;
        text-align: center;
        margin-right: 15px;
      }

      p {
        flex: 1;
        font-size: 14px;
        color: #b5bac8;
        line-height: 22px;
      }
    }

    dd+dd {
      margin-top: 20px;
    }
  }
}
</style>
